<script lang="jsx">
import { customerServer, customerPermission } from '@/api/customer'
import CRUD from '@/components/CRUD/index.vue'
import CommunityList from './components/CommunityList.vue'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  components: {
    CRUD,
  },
  setup() {
    const columns = [
      { label: '编号', prop: 'company_id', minWidth: '60px' },
      { label: '公司名称', prop: 'name', minWidth: '160px' },
      { label: '统一社会信用编码', prop: 'business_code', minWidth: '160px' },
      { label: '法人名称', prop: 'main_person_name', minWidth: '120px' },
      { label: '联系人', prop: 'contact_name', minWidth: '120px' },
      { label: '联系方式', prop: 'contact_mobile', minWidth: '120px' },
      { label: '公司地址', prop: 'address', minWidth: '160px' },
      {
        label: '营业执照',
        minWidth: '120px',
        render: (row) => (
          <el-image src={row.license_url} style={{ width: '100px', height: '100px' }} />
        ),
      },
      {
        label: '签单比例',
        minWidth: '160px',
        render: (row) => (
          <>
            和解比例：{row.hj_rate}%
            <br />
            诉讼比例：{row.ss_rate}%
            <br />
            近点比例：{row.fd_rate}%
          </>
        ),
      },
    ]
    const filters = [{ key: 'keyword', type: 'input', props: { placeholder: '请输入公司名称' } }]

    const editForm = [
      {
        label: '营业执照',
        key: 'license_url',
        type: 'image',
        required: true,
        props: { autoUpload: true, placeholder: '请上传营业执照' },
      },
      {
        label: '公司名称',
        key: 'name',
        type: 'input',
        required: true,
        props: { placeholder: '请输入公司名称' },
      },
      {
        label: '公司地址',
        key: 'address',
        type: 'input',
        props: { placeholder: '请输入公司地址' },
      },
      {
        label: '统一社会代码',
        key: 'business_code',
        type: 'input',
        required: true,
        props: { placeholder: '请输入统一社会代码' },
      },
      {
        label: '法人姓名',
        key: 'main_person_name',
        type: 'input',
        required: true,
        props: { placeholder: '请输入法人姓名' },
      },
    ]

    const visible = ref(false)
    const info = ref(null)
    const onOpenCommunity = (row) => {
      info.value = row
      visible.value = true
    }
    //物业权限修改
    const onChangePermission = async (row) => {
      if (row.is_open_permission) {
        //关闭
        await ElMessageBox.confirm('此操作将关闭物业权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        await customerPermission({ company_id: row.company_id })
        getTableData()
        ElMessage.success('关闭成功')
      } else {
        await customerPermission({ company_id: row.company_id })
        getTableData()
        ElMessage.success('开通成功')
      }
    }
    //复制账号密码
    const onCopy = (row) => {
      const text = window.location.host + '/#/login?scene=物业登录&login_code=' + row.login_code
      navigator.clipboard
        .writeText(text)
        .then(() => ElMessage.success('复制成功'))
        .catch((err) => ElMessage.error('复制成功'))
    }
    const onClose = () => {
      visible.value = false
    }

    const crudRef = ref(null)
    const getTableData = () => {
      // 这里可以调用父组件的方法
      crudRef.value.getTableData()
    }

    return () => (
      <CRUD
        ref={crudRef}
        title="客户信息"
        rawKey="company_id"
        server={customerServer}
        columns={columns}
        filters={filters}
        editForm={editForm}
        fixedColWidth="340px"
        beforeSubmit={(params) => {
          params.license_url = params.license_url?.url || params.license_url
          return params
        }}
        v-slots={{
          handler: ({ row }) => (
            <>
              <el-button type="primary" link onClick={() => onOpenCommunity(row)}>
                项目列表
              </el-button>
              <el-button type="primary" link onClick={() => onChangePermission(row)}>
                {row.is_open_permission ? '关闭' : '开通'}
                物业权限
              </el-button>
              {row.is_open_permission && (
                <el-button type="primary" link onClick={() => onCopy(row)}>
                  复制登录信息
                </el-button>
              )}
            </>
          ),
          dialog: () => (
            <el-dialog
              modelValue={visible.value}
              title="项目列表"
              width="80%"
              onUpdate:modelValue={onClose}
              destroy-on-close
            >
              {/* 但是这里不是表格滚动 */}
              <section class="max-h-[60vh] overflow-y-auto">
                <CommunityList info={info.value} onClose={onClose} />
              </section>
            </el-dialog>
          ),
        }}
      ></CRUD>
    )
  },
}
</script>
